<!-- <!DOCTYPE html> -->

<html>
<head>
<meta charset="utf-8">
<title>朱总的红包</title>
<link rel="stylesheet" type="text/css" href="../../css/hc/chatwall.css">
<link rel="stylesheet" type="text/css" href="../../css/hc/bossshowofz.css">
<style>
    
</style>
</head>
<body class="" style="background: url(../../img/rp/bg.png);background-position: center;background-repeat: no-repeat;background-attachment: fixed;">
    <div class="" style="height: auto;position: absolute;width: 100%;">

        <!-- 记录消息数量和中奖人员名单 -->
        <div style="width: 100%;height:60px;margin:auto;text-align: center;z-index: 999;">
            <span id="repacketcount" style="z-index: 2; font-size: 20pt;color: yellow;position: absolute;margin-top: 140px;margin-left: 106px;">0</span>
            <div style="width: 100%;padding-top: 140px;">
                <div style=" color: red;display: block;margin:auto;font-size:25pt;font-family:'隶书'">朱总的钱袋子还剩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;个</div>
                <!-- <span id="repacketcount" style=" font-size: 18pt;color: yellow;font-family:'微软雅黑'">0</span>个</div> -->
                
            </div>
        </div>
    </div>
    <div style="width:100%;height: 100%;text-align: center;"><!-- /*background: #EEEEEE*/ -->

        <img class="moneyle" style="" src="../../img/rp/moneyle.png">
        <img class="moneyre" style="" src="../../img/rp/moneyr.png">
<!-- middle -->
        <img class="moneyme" style="" src="../../img/rp/moneyr.png">
        <img class="moneymd" style="" src="../../img/rp/moneyll.png">

        <img class="moneyld" style="" src="../../img/rp/moneyll.png">
        <img class="moneyrd" style="" src="../../img/rp/moneyl.png">
        <img class="moneyaaa" style="" src="../../img/rp/moneyl.png">
        <img class="moneyaa" style="" src="../../img/rp/moneyr.png">
        <img class="moneybag" style="" src="../../img/rp/bag.png">
    </div>
    <div id="mainIP" hidden="hidden"><%=httpUrl%>|<%=socketUrl%></div>
</body>
<script src="../../js/jquery.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<!-- <script src="../../js/hc/chatwall.js"></script>  -->
<script type="text/javascript">
    var connectIP = $("#mainIP").html();
    var ip =connectIP.split("|")[0];
    var socketUrl=connectIP.split("|")[1];
    // 主监听socket   用来控制 次监听socket
    var mainSocket='';
    var mainUrl= socketUrl +'mainsocket';
    $(function() {
        mainWebSocket();
        getDate();
        setInterval(getDate, 1000); 
        // addcssFun();
    })
    // 连接mainWebSocket  服务
    function mainWebSocket(){
        if ('WebSocket' in window)
            mainSocket = new WebSocket(mainUrl);
        else if ('MozWebSocket' in window)
            mainSocket = new MozWebSocket(mainUrl);
        //打开连接时触发
        mainSocket.onopen = function() {
            console.log('OPEN: ' + mainSocket.protocol);
        };
        //收到消息时触发
        mainSocket.onmessage = function(message) {
            console.log("mainsocket收到消息了"+message);
            var string = message.data.split(":");
            var objMsg = string[0];
            var controlMsg = string[1];
            if(objMsg == "red"){
                if(controlMsg == "zhu")
                    addcssFun();
            }
        };  
    }

    function getDate(){
   
        $.ajax({
            url:ip+'redpacket/numofbossaward',
            type:'get',
            async:false,
            data:{name:"zhu"},
            dataType:'json',
            success:function(data){
                
                $("#repacketcount").html(data.size);
            },
            error:function(){
                console.log("获取数量失败");
            }
        })
    }
    function addcssFun() {
        $("#repacketcount").css({
            "animation": "bgnum 2s infinite" 
        })
        $(".moneyle").css({
            "animation": "pulse 3s infinite" 
        })
        $(".moneyre").css({
            "animation": "pulse_re 3s infinite"
        })
        $(".moneyme").css({
            "animation": "pulse_me 2.5s infinite" 
        })
        $(".moneymd").css({
            "animation": "pulse_md 2.5s infinite"
        })
        $(".moneyld").css({
            "animation": "pulse_ld 2s infinite"
        })
        $(".moneyrd").css({
            "animation": "pulse_rd 2s infinite"
        })
        $(".moneyaaa").css({
            "animation": "pulse_aaa 2s infinite"
        })
        $(".moneyaa").css({
            "animation": "pulse_aa 2s infinite"
        })
    }
</script>
</html>
